﻿
@{
    ViewBag.Title = "Register";
}
@section scripts{
<script src="~/Scripts/jquery.validate.js"></script>
}

<script src="~/Scripts/Breezejs/Register.js"></script>

<style>
    .errorClass {
        color: red;
        font-weight: normal;
        border-color: #b03535;
    }
</style>

<div class="col-md-7" style="min-height: 600px">
    <h3>Account Information</h3>
    <div  class="form-horizontal">
        <form id="commentForm">
            <div class="form-group">
                <label class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input id="_email" type="email" name="email" class="form-control" placeholder="Email">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3">Confirm password</label>
                <div class="col-xs-9">
                    <input type="password" name="password_confirm" class="form-control" id="confirmPassword" placeholder="Confirm password">
                </div>
            </div>



            <div class="form-group">
                <label class="control-label col-xs-3">Captcha</label>
                <div class="col-xs-9">
                    <div class="col-xs-3">
                        <canvas id='textCanvas' width=100 height=40></canvas>
                        <img id='image' style="display:none">
                    </div>
                    <div class="col-xs-2">
                        <a id="refresh_captcha" onclick="randomString()" href="javascript:void(0)"><span class="glyphicon glyphicon-refresh"></span></a>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3">Result</label>
                <div class="col-xs-9">
                    <input name="catpcha" class="form-control" placeholder="Result">
                    <input id="_catpcha" style="display:none" />
                </div>
            </div>
        </form>
        <div id="regisForm" class="form-group">
            <label class="control-label col-xs-3">Register account</label>
            <div class="col-xs-9" id="acctype" data-bind="foreach: RoleType">
                <div class="radio">

                    <!-- ko template: Name() != 'Admin' ? '_radio' : '' --><!-- /ko -->
                    <!-- ko template: Name() == 'Employer' ? '_note' : '' --><!-- /ko -->
                    <script id="_radio" type="text/html">
                        <label>
                            <input type="radio" name="acctype" data-bind="value: UniqueId" checked>
                            <span data-bind="text: Name"></span>
                        </label>
                    </script>

                    <script id="_note" type="text/html">
                        <i><small><u>Note:</u> This account must wait administrator approve first</small></i>
                    </script>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3"></label>
            <div class="col-xs-9">
                <button id="submit" class="btn btn-primary">Continue</button>
            </div>
        </div>
    </div>

</div>
<div class="col-md-5">
    @Html.Partial("_RegistrationProcess")
</div>